<template>
  <div class="home-con">
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="dd_item">
          <div><img :src="item.img" /></div>
          <div class="dd_text">
            <div>{{ item.name }}</div>
            <div>{{ item.price }}</div>
          </div>
        </div></el-col> 
        
    </el-row>
    <div class="home-a">
       <div class="shang">待处理事务</div>
        <el-row>
        <el-col :span="8" v-for="(item, index) in  daichuliArr" :key="index">
        <div class="aa_item">
         <div>{{item.name}}</div>
          <div class="bb_item">{{item.num}}</div>
        </div>
        </el-col>    
    </el-row>
    </div>

    <div class="home-b">
      <div class="shang"></div>
      
    <el-row>
      <el-col :span="12" v-for="(item, index) in zonglan" :key="index">
        
        <div class="cc_item"></div> 
        
          <!-- <div class="ee_text">
            <div>{{ item.name }}</div>
            <div>{{ item.num }}</div>
          </div> -->
        
        </el-col> 
        
    </el-row>
       </div>
       <div class="home-c">
         <div class="ff_item">
           <span>订单统计</span>
         </div>
         <div id="mychart" class="mychart"></div>
         <div class="ff-left">
            <el-row>
          <el-col  v-for="(item, index) in tongji" :key="index">       
            <div>{{ item.name }}</div>
            <div>{{ item.num }}</div>
            <div>{{item.price}}</div>       
        </el-col> 
        
         </el-row>
          
         </div>
         
       </div>
        
  </div>
     
</template>

<script>
export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          //在 js里面获取 vue项目的本地图片 ，需要使用  require
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日订单总数1",
          price: "300",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "今日订单总数2",
          price: "400",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
       daichuliArr: [
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },
         { id: 1, name: "代付款订单", num: 10 },

         ],
        zonglan:[
          {id:1,name:"已下架",num:40},
          {id:2,name:"已下架",num:40},
          {id:3,name:"已下架",num:40},
          {id:4,name:"已下架",num:40},
          {id:5,name:"已下架",num:40},
          {id:6,name:"已下架",num:40},
          {id:7,name:"已下架",num:40},
          {id:8,name:"已下架",num:40},

        ],
        tongji:[
          {id:1,name:"本月订单统计",num:"2000",price:"+10%同比上月"},
           {id:2,name:"本月订单统计",num:"2000",price:"+10%同比上月"},
            {id:3,name:"本月订单统计",num:"2000",price:"+10%同比上月"},
             {id:4,name:"本月订单统计",num:"2000",price:"+10%同比上月"},
        ],
         option: {
        //图表数据
        //x轴数据
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        //y轴
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [400, 200, 150, 250, 70, 110, 200],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
         
  },
    }
  
},
mounted() {
    //调用 画图表的函数
    this.drawLine();
  },
  methods: {
    drawLine() {
      //1.初始化
      let mycharts = this.$echarts.init(document.getElementById("mychart"));
      //2.绘制
      mycharts.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss">
.mychart {
  width: 600px;
  height: 400px;
  float: right;
}
.home-con {
  margin: 10px;
 
}
.dd_item {
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  padding: 10px;
  border-radius: 5px;
  .dd_text {
    padding-left: 10px;
  }
  img {
    width: 50px;
  }
}
.home-a{
  width: 100%;
  height: 204px;
  background-color: #fff;
  margin-top: 15px;
  border:1px solid #ccc;
  
}
 .home-a .shang{
    height: 48px;
    background-color: #f2f6fc;
    line-height: 48px;
    padding-left: 20px;
  }
.aa_item{
  height: 52px;
  background-color: #fff;
   display: flex;
   border-bottom:1px solid #ccc;

}
.bb_item{
  color: red;
}
.home-b{
  margin-top:15px;
  height: 184px;
  background-color: #fff;
  border:1px solid #ccc;
 
}

.home-b .shang{
    height: 48px;
    background-color: #f2f6fc;
    line-height: 48px;
    padding-left: 20px;
   
  
  }
.home-c{
  width: 100%;
  height: 470px;
  // background-color: red;
  margin-top: 15px;
  border:1px solid #ccc;
}
.ff_item{
  height: 50px;
  background-color: #f2f6fc;
  
}
.ff-left{
  height: 420px;
 border-right: 1px solid #ccc;
  width: 150px;
 
 
}
.ff-left div{
  padding: 5px;
}
a{
  text-decoration: none;
  
}

</style>